<template>
    <div id="detail">
        <Nav></Nav>
        <div class="detail-container common">
            <Crumbs :get-nav-data="nav"></Crumbs>
            <article>
                <div class="detail-img">
                    <div class="detail-shop">
                        <dl>
                            <dt class="preview_img">
                                <img :src="imgUrl + productInfo.coverImg" alt="">
                                <div class="mask"></div>
                                <div class="big">
                                    <img :src="imgUrl + productInfo.coverImg" alt="" class="bigImg">
                                </div>
                            </dt>
                            <dd>
                                <ul>
                                    <li v-for="(item, index) in productInfo.imgAltas" :key="index"
                                        @mouseenter="moventer(index)">
                                        <img :src="imgUrl + item.src" alt="" />
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                    </div>

                    <div class="detail-shop-beside">
                        <h3 class="detail-shop-beside-title">{{ productInfo.seriesTitle }}</h3>
                        <p class="detail-shop-beside-text">{{ productInfo.seriesSubTitle }}</p>
                        <p class="detail-shop-beside-coin">{{ productInfo.coin }}积分</p>
                        <dl v-for="(item, index) in productInfo.parameterJson" :key="index">
                            <dt>{{ item.title }}</dt>
                            <dd>
                                <span v-for="items in item.parameters" :key="items.id"
                                    :class="items.currentActivate ? 'itemActive' : ''" @click="initList(items.id)">
                                    {{ items.title }}
                                </span>
                            </dd>
                        </dl>
                        <p class="count"><span>数量</span>*礼品库存{{ productInfo.stock }}件</p>
                        <p class="step">
                            <!-- <span @click="stepHandleFun1">-</span><span>{{stepNum}}</span><span @click="stepHandleFun2">+</span> -->
                            <span @click="stepHandle(-1)"></span><span>{{ stepNum }}</span><span
                                @click="stepHandle(1)"></span>
                        </p>
                        <div class="cart">
                            <span>加入购物车</span>
                            <span>立即兑换</span>
                        </div>

                        <div class="wechat">

                            <img src="../assets/img/love.png" alt="" />
                            <span>喜欢 {{ productInfo.like }}</span>
                            <div>

                                <img src="@/assets/img/kj.png" alt="">
                                <img src="@/assets/img/wechat.png" alt="">

                                <img src="@/assets/img/wx.5584e874.png" alt="" class="hidden">
                            </div>
                        </div>
                    </div>
                </div>

                <aside>
                    <h3>你还可以兑换</h3>
                    <dl v-for="item in themYouCanBuy" :key="item.id" @click="initList(item.id)">
                        <dt><img :src="imgUrl + item.img" alt=""></dt>
                        <dd>
                            <p>{{ item.name }}</p>
                            <p>
                                <span>{{ item.coin }}</span>
                                <img src="@/assets/img/monad.png" alt="">
                            </p>
                        </dd>
                    </dl>
                </aside>
            </article>

            <!-- 商品详情图与常见问题 -->
            <div class="tabs">
                <ul class="tabs-title">
                    <li :class="tabsBool ? 'tabs-active' : ''" @click="tabsBool = 1">商品详情</li>
                    <li :class="!tabsBool ? 'tabs-active' : ''" @click="tabsBool = 0">联系我们</li>
                </ul>
                <ul>
                    <li v-if="tabsBool" v-html="productInfo.description"></li>
                    <!-- string对象 -->
                    <li v-else>
                        <dl>
                            <dt>兑换后运费如何收取？</dt>
                            <dd>商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。</dd>
                            <dd>（注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）</dd>
                        </dl>
                        <dl>
                            <dt>兑换后运费如何收取？</dt>
                            <dd>商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。</dd>
                            <dd>（注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）</dd>
                        </dl>
                        <dl>
                            <dt>兑换后运费如何收取？</dt>
                            <dd>商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。</dd>
                            <dd>（注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）</dd>
                        </dl>
                        <dl>
                            <dt>联系我们</dt>
                            <dd><a href="http://www.wolfcode.cn">www.wolfcode.cn</a></dd>
                            <dd>微信公众号搜索“叩丁狼”</dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import Nav from '@/components/Nav'
import Crumbs from '@/components/Crumbs'
import { getData } from '@/request/api.js'



export default {
    data() {
        return {
            nav: [], // 面包屑导航
            productInfo: [], // 商品详情
            themYouCanBuy: [], // 还可以兑换的
            stepNum: 0,
            tabsBool: 1,
        }
    },

    components: {
        Nav,
        Crumbs
    },
    created() {
        let id = this.$route.query.id
        // console.log(this.$route.query.id+ 111);
        this.initList(id)
        document.documentElement.scrollTop = 0
    },
    mounted() {
        import('@/assets/js/detail')
    },
    watch: {
        productInfo(newval, oldval) {
            // 数据变化后重置setpNum,并且保留之前的购物数量
            window.sessionStorage.setItem(oldval.id, this.stepNum)

            if (window.sessionStorage.getItem(newval.id) != 0) {
                this.stepNum = Number(window.sessionStorage.getItem(newval.id))
            } else {
                this.stepNum = 0;

            }
            // this.$router.push({path:'/detail/'+ newval.id,query:{id:id}})
            // this.$router.push({ path: '/detail', query: { id: newval.id } })

            // console.log(newval, oldval)
            // console.log(this.stepNum);
        }
    },
    methods: {
        moventer(index) {
            // console.log(this.productInfo.coverImg);
            // 优化鼠标重复移入同一张图片
            if (this.currentImgIndex == index) return;


            // console.log(this.productInfo.imgAltas[0].src);
            this.productInfo.coverImg = this.productInfo.imgAltas[index].src;

            // 同步默认下标
            this.currentImgIndex = index;
        },
        stepHandle(num) {
            // 
            if ((this.stepNum <= 1 && num == -1) || (this.stepNum >= this.productInfo.stock && num == 1)) {
                return;
            }
            this.stepNum += num;
            // this.stepNum= this.stepNum + num
        },
        async initList(id) {
            const { data: res } = await getData(id)
            // console.log(res.data);
            this.nav = res.data.nav
            this.productInfo = res.data.productInfo
            this.themYouCanBuy = res.data.themYouCanBuy

            this.productInfo.description = this.productInfo.description.replaceAll('upload/', 'https://sc.wolfcode.cn/upload/')

        }
        // await axios.get("http://www.520it.com:8081/cms/products/129").then((res) => {
        //   console.log(JSON.parse(JSON.stringify(res.data.data)));
        //   this.nav = res.data.nav
        //   this.productInfo = res.data.productInfo
        //   this.themYouCanBuy = res.data.themYouCanBuy
        // })
        // ----/
        // const data = await axios.get("http://gz.wolfcode.cn/cms/products/129")
        // const res = data.data.data
        // console.log(JSON.parse(JSON.stringify(res)));
        // this.nav = res.nav
        // this.productInfo = res.productInfo
        // this.themYouCanBuy = res.themYouCanBuy
        // request.get("/products/129").then((data) => {
        //   const res = data.data.data
        //   console.log(JSON.parse(JSON.stringify(res)));
        //   this.nav = res.nav
        //   this.productInfo = res.productInfo
        //   this.themYouCanBuy = res.themYouCanBuy
        // })
        // request.get("/products/" + id).then((data) => {
        //     const res = data.data.data;
        //     this.nav = res.nav;
        //     this.productInfo = res.productInfo;
        //     this.themYouCanBuy = res.themYouCanBuy;
        // });

    },
}
</script>

<style lang="less" scoped>
.tabs-active {
    background-color: #ececec;
}

#detail {
    .detail-container {
        padding: 57px 0 79px 0;

        article {
            padding: 18px 0 48px 0;
            display: flex;

            .detail-img {
                width: 970px;

                display: flex;

                .detail-shop {
                    margin-right: 30px;

                    dl {
                        dt {
                            position: relative;

                            .mask {
                                position: absolute;
                                display: none;

                                top: 0;
                                left: 0;
                                width: 200px;
                                height: 200px;
                                background-color: yellow;
                                opacity: .5;
                            }

                            .big {
                                position: absolute;
                                top: 0;
                                left: 500px;
                                width: 550px;
                                height: 550px;
                                border: 1px solid #ccc;
                                overflow: hidden;
                                z-index: 999;
                                display: none;

                            }

                            .big img {
                                position: absolute;
                                top: 0;
                                transform: scale(1.5);

                            }

                            img {
                                width: 457px;
                                height: 457px;
                            }
                        }

                        dd {
                            width: 100%;
                            display: flex;

                            ul {
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                margin-top: 15px;

                                li {
                                    img {
                                        width: 100px;
                                    }
                                }
                            }


                        }
                    }


                }

                .detail-shop-beside {

                    width: 430px;

                    .detail-shop-beside-title {
                        font-size: 28px;
                        color: #000000;
                        padding-bottom: 15px;
                    }

                    .detail-shop-beside-text {

                        font-size: 14px;
                        color: #999999;
                        line-height: 20px;
                        margin-bottom: 26px;

                    }

                    .detail-shop-beside-coin {
                        font-size: 28px;
                        font-weight: bold;
                        color: #fd604d;
                        border-bottom: 1px solid #ececec;
                        padding-bottom: 22px;
                        margin-bottom: 20px;
                    }

                    dl {
                        dt {
                            font-size: 16px;
                            padding-bottom: 15px;
                        }

                        dd {
                            display: flex;
                            flex-wrap: wrap;

                            span {
                                border: 1px solid #D1D1D1;
                                padding: 10px 16px;
                                color: #D1D1D1;
                                margin-right: 20px;
                                margin-bottom: 12px;
                                cursor: pointer;
                            }

                            .itemActive {
                                border: 1px solid #0A328E;
                                color: #0A328E;
                            }
                        }
                    }


                    .count {
                        margin-top: 18px;
                        line-height: 23px;
                        font-size: 16px;
                        color: #999;

                        span {
                            color: #000;
                            margin-right: 5px;
                        }
                    }

                    .step {
                        margin-top: 15px;
                        display: flex;

                        span {
                            border: 1px solid #D1D1D1;
                            padding: 10px;
                            color: #D1D1D1;
                            cursor: pointer;

                            // 点快了会有蓝色框选中 + - ，很难受，使用伪元素选择器
                            &:first-child::before {
                                content: '-';
                            }

                            &:nth-child(2) {
                                border-left: none;
                                border-right: none;
                                padding: 10px 20px;
                                cursor: default;
                                color: #000;
                            }

                            &:last-child::before {
                                content: '+';
                            }
                        }
                    }

                    .cart {
                        display: flex;
                        margin: 30px auto;
                        color: #fff;
                        font-size: 18px;

                        span {
                            width: 160px;
                            height: 46px;
                            line-height: 46px;
                            text-align: center;
                            cursor: pointer;

                            &:first-child {
                                background-color: #3dc36b;
                                margin-right: 30px;
                            }

                            &:last-child {
                                background-color: #fd604d;
                            }
                        }

                    }

                    .wechat {
                        display: flex;

                        >img {
                            width: 26px;
                            height: 23px;
                        }

                        span {
                            font-size: 18px;
                            padding: 4px 20px 0 20px;
                            border-right: 1px solid #cbcbcb;
                            cursor: default
                        }

                        div {
                            position: relative;

                            img:nth-child(1),
                            img:nth-child(2) {
                                width: 24px;
                                height: 24px;
                                margin-left: 20px;
                                background-color: #cbcbcb;
                            }

                            img:nth-of-type(2):hover+.hidden {
                                display: block;

                            }

                            img:nth-child(3) {
                                position: absolute;
                                bottom: -40px;
                                left: -100px;
                                transform: rotate(-90deg);
                                display: none;

                            }
                        }


                    }
                }
            }

            aside {
                padding-left: 15px;
                border-left: 1px solid rgba(0, 0, 0, .1);

                h3 {
                    font-size: 18px;
                    color: #333333;
                    // line-height: 20px;
                    margin-bottom: 20px;
                }

                dl {
                    display: flex;
                    font-size: 16px;
                    cursor: pointer;
                    margin-bottom: 30px;

                    dt {
                        width: 78px;
                        box-sizing: border-box;

                        img {
                            width: 100%;
                            vertical-align: middle;
                        }

                        &:hover {
                            border: 1px solid #0a328e;
                        }
                    }

                    dd {
                        padding-left: 10px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;

                        p {

                            &:first-child {
                                margin-bottom: 12px;
                                font-size: 14px;
                            }

                            span {
                                color: red;
                                font-size: 18px;

                            }

                            img {
                                width: 20px;
                                height: 20px;
                                vertical-align: middle;
                                padding-left: 5px;
                            }
                        }
                    }
                }

            }
        }

        .tabs {
            font-size: 18px;

            .tabs-title {
                display: flex;

                li {
                    width: 130px;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                }
            }

            .tabs-content {
                dt {
                    font-size: 18px;
                    font-weight: 800;
                    margin-top: 50px;
                }

                dd {
                    line-height: 20px;
                    font-size: 14px;

                    a {
                        color: #000;
                    }
                }
            }
        }
    }
}
</style>